<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.3);
            /* 以html视口（view port）为参照物，紧贴四个边，实现撑满全屏的效果*/
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
  <div class="mask">

  </div>

  <div>
<!--   lorem*60    -->
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, doloribus ea earum iste magni odio
          perferendis quos soluta vero voluptas? Aliquam fugiat minus odit. Fugiat, fugit, provident. Iste repellat,
          unde!
      </div>
      <div>Id in laborum magnam possimus reiciendis. Alias amet aperiam distinctio dolor dolorum excepturi facilis
          fugiat impedit, ipsam, laudantium libero modi mollitia neque perferendis reprehenderit sapiente sunt tenetur
          unde vero vitae?
      </div>
      <div>Id minus pariatur voluptate. Asperiores aspernatur dolor harum, illo laudantium maiores necessitatibus neque
          nisi nobis non officia placeat qui recusandae reprehenderit repudiandae similique vel veniam veritatis vitae
          voluptatem. Quas, quis.
      </div>
      <div>Exercitationem inventore natus numquam! Amet aperiam, dolorem ducimus exercitationem iusto libero magnam
          magni nemo nisi nostrum nulla numquam officiis praesentium quaerat quasi quis repellat, sed similique
          temporibus totam vel veritatis.
      </div>
      <div>Aliquam aliquid commodi consectetur deserunt dignissimos hic illum modi nemo officia veritatis! Ad alias
          aliquam aperiam blanditiis consectetur culpa incidunt officia, omnis porro quam quibusdam sed sint, soluta
          ullam, veritatis.
      </div>
      <div>A, accusamus accusantium aliquam at autem consectetur delectus expedita impedit ipsa maiores mollitia neque
          non quos saepe tenetur unde voluptatibus? Aspernatur culpa delectus harum in iusto repellendus saepe sit
          totam.
      </div>
      <div>A aliquam at maiores neque voluptatum! Alias blanditiis distinctio temporibus. A consectetur, dolorem
          excepturi harum id nihil, odit possimus quis quod quos unde vel voluptates. Dolore doloremque ducimus
          inventore quos?
      </div>
      <div>A aliquam dignissimos ducimus est, exercitationem illo ipsam quasi! At cumque cupiditate exercitationem
          molestiae mollitia nihil reiciendis! A deleniti dolor, dolore enim excepturi maxime possimus quia saepe?
          Laborum, quibusdam, sit.
      </div>
      <div>Assumenda dicta non repellendus tempora unde! Autem fugiat, harum neque nostrum quae quidem recusandae
          repudiandae voluptas! Adipisci asperiores beatae id, illum labore, minus necessitatibus neque placeat porro
          quidem voluptas voluptatibus!
      </div>
      <div>Ad architecto aspernatur debitis dolorem et hic id maxime nobis provident quibusdam reiciendis reprehenderit
          rerum sapiente, tempore tenetur veritatis, vitae voluptate? At ipsa magnam non, quisquam quod ratione repellat
          repellendus.
      </div>
      <div>Accusantium alias deserunt, doloremque enim eveniet impedit iusto minus non nostrum obcaecati officiis
          quibusdam quis repudiandae, sapiente, soluta temporibus veniam! Asperiores dolore dolorum fuga harum,
          molestiae perspiciatis quos sed ut!
      </div>
      <div>Aperiam dolorum ducimus exercitationem facere ipsum iusto odio officiis! Alias aspernatur autem, dolores
          eligendi explicabo incidunt ipsa itaque magnam maxime minima praesentium qui, quidem, quo quos veritatis
          voluptas voluptate voluptatem?
      </div>
      <div>Atque aut autem incidunt omnis voluptatum! Adipisci cumque dicta esse exercitationem id ipsam ipsum maiores
          perspiciatis suscipit voluptate? Amet blanditiis eos esse inventore, minus nam nesciunt quas rem ut
          voluptates!
      </div>
      <div>Asperiores blanditiis corporis culpa cupiditate dolore eum fuga obcaecati odio optio porro, qui quos sed?
          Deleniti, eius, ex. Deleniti eius expedita fugiat harum illum in maiores maxime placeat ratione tenetur.
      </div>
      <div>Cum enim excepturi exercitationem expedita veritatis! Accusamus accusantium animi architecto assumenda
          debitis dignissimos dolorum, fuga inventore ipsum laudantium, magnam maxime mollitia nam, odit porro provident
          quasi quia quo reprehenderit rerum.
      </div>
      <div>Accusamus aperiam deleniti dicta dolor dolore enim, esse et ex id ipsam iure molestias natus pariatur
          placeat, quasi rem repellat similique tempora ullam voluptates! Aspernatur deleniti dignissimos maxime
          necessitatibus nisi?
      </div>
      <div>Accusamus aliquam animi aperiam architecto blanditiis consectetur culpa deserunt dolore dolorem enim et ex
          ipsum laborum maiores molestias nobis, pariatur possimus praesentium, quam, quisquam quos repellendus
          repudiandae sed unde voluptates.
      </div>
      <div>Accusantium ad est excepturi id in maiores repellendus temporibus voluptate! Ad adipisci aspernatur
          consequatur, corporis cupiditate dolorem dolorum eligendi harum id illo molestias, odit quia rerum ut vel
          velit, veniam!
      </div>
      <div>Ad debitis id laboriosam mollitia porro provident quaerat quo ratione repellat voluptas? A adipisci aliquid
          consequatur eaque expedita fugiat inventore modi, nobis, nulla obcaecati quasi quo quod soluta unde voluptate.
      </div>
      <div>Accusantium beatae, commodi consequatur fugiat in mollitia omnis porro quaerat quidem quod quos, similique
          temporibus veritatis voluptate voluptatibus. Architecto dignissimos numquam obcaecati velit veniam vero.
          Accusamus commodi illum odio voluptate.
      </div>
      <div>Laboriosam maiores minus mollitia porro vero voluptas voluptates! Consectetur cum deleniti, dolorem enim esse
          facere illum ipsum laudantium magnam nesciunt, optio ratione sequi similique, tempora tempore voluptatem
          voluptatum. A, veniam!
      </div>
      <div>Aliquam aliquid architecto consequatur consequuntur dolorum illum iste maxime molestias natus porro, quod
          sunt tempora? Adipisci delectus, dolor dolorem exercitationem id porro quae quidem quod ratione sapiente vel
          veniam vero?
      </div>
      <div>Ab accusantium architecto beatae delectus doloremque dolores ducimus eaque fuga, illo iure laborum modi omnis
          pariatur, quasi reiciendis tempore ut. Commodi deleniti deserunt dolore itaque maxime molestiae nulla quos
          voluptas?
      </div>
      <div>Accusantium aliquam amet blanditiis deleniti distinctio dolore ipsum, laborum, nihil nobis omnis, perferendis
          repellendus? Accusamus corporis, debitis dicta ipsam necessitatibus possimus repellendus tempora velit!
          Aliquid dolor est odit possimus praesentium?
      </div>
      <div>A ab aliquam aperiam autem, commodi consequuntur debitis dignissimos eveniet facilis harum hic illum in
          laudantium magni modi nemo nobis nulla numquam obcaecati qui quidem recusandae repellat soluta totam unde.
      </div>
      <div>Accusantium, aliquid expedita explicabo ipsum iure tenetur. Accusamus commodi consectetur eveniet totam? Amet
          atque blanditiis distinctio enim, ipsa optio possimus quaerat, quia quidem ratione, reprehenderit rerum sint
          ullam voluptas voluptate?
      </div>
      <div>Atque id iusto sit tempora. Aliquid aut consequatur ducimus excepturi expedita fugiat fugit incidunt
          inventore ipsam laboriosam neque nesciunt nihil, nisi officia optio quia quibusdam recusandae sapiente sint,
          vel voluptatem.
      </div>
      <div>Cupiditate doloremque ipsa ipsum magni mollitia officia sit. Alias autem eaque harum nostrum officiis quas
          quidem totam, velit! Adipisci aut, consequatur deserunt ea labore natus officia possimus quis tempora unde?
      </div>
      <div>Ab alias aperiam asperiores commodi cum dolorem dolores dolorum eius eveniet hic illum incidunt ipsam ipsum
          magni maxime odio odit placeat quidem quod rem, repellendus saepe sit suscipit totam ut!
      </div>
      <div>Ab asperiores commodi deserunt in recusandae. Fugit nulla numquam rem similique sunt. Animi dicta dolore
          doloremque eos et facere iste, minima nesciunt omnis perspiciatis quae quibusdam quos repellendus sit
          voluptates?
      </div>
      <div>Deleniti illo maiores numquam possimus repellendus repudiandae vel? Alias, asperiores atque blanditiis
          consequatur corporis culpa dignissimos ea earum exercitationem expedita ipsam, iure, laudantium necessitatibus
          odit pariatur quisquam repudiandae sit unde?
      </div>
      <div>Aliquam, architecto distinctio laborum praesentium veniam voluptatum. A, autem, cumque dolore dolorem ipsam
          iusto laudantium mollitia nemo officia optio quibusdam sed vitae, voluptate. Ad architecto dolore
          exercitationem fugit provident quos.
      </div>
      <div>Aperiam at cumque doloremque eius eligendi eum eveniet fugiat harum id ipsum labore molestiae nam
          necessitatibus officia quam quas quasi quibusdam quo quod repellat rerum saepe similique soluta, tenetur
          ullam!
      </div>
      <div>Accusamus aliquam asperiores at cum cupiditate doloremque doloribus, ducimus, eligendi eos est iste iure,
          minus modi officia omnis perspiciatis reprehenderit veniam voluptatibus! Debitis optio quisquam quos
          repudiandae rerum sequi voluptas.
      </div>
      <div>Aliquam, ea explicabo id illo ipsum labore, libero molestias omnis perferendis quae quisquam similique
          suscipit temporibus. At cumque cupiditate dolores, ducimus in labore minus nihil nobis pariatur sed velit
          voluptate!
      </div>
      <div>Blanditiis cum debitis eos, et explicabo laboriosam molestiae nam odit optio quam quibusdam rerum, sint. At
          distinctio, earum eius enim, eum harum magnam nam omnis pariatur rem sit voluptatem, voluptatibus!
      </div>
      <div>Ab aperiam architecto autem commodi corporis debitis deserunt distinctio eligendi eveniet facilis harum
          incidunt labore libero maiores nisi nostrum nulla possimus quaerat quam quidem quis repellendus, similique sit
          sunt tempora.
      </div>
      <div>Architecto blanditiis earum impedit itaque praesentium qui quia repellendus repudiandae tenetur voluptates.
          Ab adipisci architecto, consectetur dolorem explicabo fugiat fugit inventore itaque minus perferendis quam
          quia ratione sit totam voluptatem!
      </div>
      <div>Accusamus amet architecto cupiditate et minima nihil ratione reiciendis totam vitae voluptates. Adipisci
          animi cumque cupiditate dolor eaque ex excepturi, fugiat odit provident quibusdam ratione sed similique vel
          velit, voluptas?
      </div>
      <div>Accusamus beatae deserunt dolores eos magni, quaerat quam repellendus voluptatem? Autem corporis, cumque
          dolorem est expedita fuga illo ipsam labore libero nemo, perspiciatis quis quo sapiente temporibus ullam,
          voluptas voluptatum?
      </div>
      <div>Dignissimos earum facere similique suscipit totam. A aut delectus dolorem eligendi est nam nobis ut
          voluptatum. Cum delectus deserunt doloremque eligendi eos explicabo hic illum quo sequi ut? Nisi, recusandae?
      </div>
      <div>Cupiditate debitis eveniet odio quis ut. Adipisci, consequuntur cum cupiditate deleniti dolore ducimus
          eligendi fugiat illum impedit ipsam, libero molestias perferendis perspiciatis possimus quaerat qui, sequi
          sint suscipit vitae voluptas.
      </div>
      <div>A alias at consectetur consequatur culpa doloribus eius et illum ipsam libero minima molestiae, nesciunt nisi
          omnis praesentium provident quam qui repellat repudiandae sapiente sit soluta tempore unde veritatis
          voluptatem?
      </div>
      <div>A adipisci consequatur deleniti fuga praesentium quis quos rem velit voluptas? Accusantium architecto,
          corporis ea itaque iure quo rem tempora. Adipisci consectetur corporis illo illum itaque laudantium nihil
          sequi. Modi?
      </div>
      <div>Adipisci aut cupiditate dolore eum fugiat ipsa iste, itaque iusto laudantium magnam officiis, perferendis
          quam qui quo quos reiciendis repudiandae sequi sunt suscipit tempore temporibus vel voluptate. Dignissimos
          laborum, quae?
      </div>
      <div>Aliquid culpa impedit ipsum, libero reiciendis repellendus repudiandae? Corporis, facilis, ut? Aperiam ea
          minus sint tempora! Alias aut beatae dolorem doloremque illo ipsum iusto, magnam quis quisquam repellat rerum
          voluptatem.
      </div>
      <div>Delectus distinctio dolore dolorum earum itaque, maxime necessitatibus rem voluptatem! Ab, delectus deserunt
          doloribus, eum in laborum laudantium minima neque optio provident, quibusdam tempore tenetur! Architecto
          doloremque ea facere id!
      </div>
      <div>Amet consectetur consequuntur deleniti deserunt doloribus ea earum excepturi exercitationem impedit inventore
          iste labore laboriosam modi molestiae nobis nostrum nulla omnis optio porro provident qui quis sint, tenetur
          veritatis voluptates!
      </div>
      <div>Accusamus aperiam cumque debitis delectus dicta distinctio dolore doloribus eligendi illum, incidunt
          inventore laborum maiores necessitatibus nemo non pariatur quas quidem rerum similique sit suscipit ut velit
          veritatis vitae voluptate?
      </div>
      <div>Ab accusantium, aut cumque dicta dignissimos, dolor dolore eaque et ex hic illo illum ipsa iure maiores
          nesciunt non odio quas quisquam quos ratione rem, repellat repellendus repudiandae tempore voluptatibus!
      </div>
      <div>Accusamus aliquid debitis doloremque, laboriosam molestias natus odio possimus quas? Aliquam blanditiis,
          cupiditate, dolorem eaque earum enim exercitationem iusto optio possimus quasi qui quibusdam reprehenderit sit
          veritatis voluptas. Id, reprehenderit.
      </div>
      <div>Dolorem in officia repellendus rerum tempore? A accusamus beatae, dignissimos doloribus esse, inventore
          perferendis quae quas, quisquam quod repellendus voluptatem. A assumenda dolore molestias nulla odit officiis
          recusandae reprehenderit sapiente?
      </div>
      <div>Consequuntur est fugiat id inventore itaque natus quia quis voluptatem? Aliquam amet autem consectetur cumque
          dolor dolorem dolorum harum iste iusto laborum minus molestias, nemo nesciunt, nihil tempore vitae voluptates!
      </div>
      <div>Cum distinctio doloremque dolores eos, facilis laborum nemo nihil nostrum, numquam reprehenderit sint
          tempore. Necessitatibus perspiciatis possimus vero. Atque deserunt eveniet ex laudantium mollitia officia
          quibusdam quisquam rem sequi sint!
      </div>
      <div>Ad dolores fugiat fugit labore numquam quasi. Accusamus alias at cum dolore dolores earum error laborum
          laudantium neque numquam ratione, sint totam vero? Aliquid amet aspernatur dolorum ea illo ratione!
      </div>
      <div>Adipisci alias aliquid animi deleniti doloribus ducimus esse, est exercitationem facere harum illo iure
          laboriosam magnam mollitia neque nihil nisi nostrum officia quas quibusdam reiciendis rerum saepe suscipit
          unde, voluptates.
      </div>
      <div>Ab adipisci blanditiis, consequuntur dicta dignissimos dolorem eius enim eos, expedita facere illo in maiores
          molestias natus nostrum nulla numquam, officiis quaerat quibusdam quos recusandae reiciendis saepe sed ullam
          voluptate!
      </div>
      <div>Accusamus aliquam architecto corporis illum laborum necessitatibus nulla ratione tenetur unde ut! Facilis
          inventore magni obcaecati quam quasi quidem, recusandae suscipit. A alias dolore doloremque eos magnam.
          Accusamus ipsam, temporibus!
      </div>
      <div>Alias aliquid, earum et, harum magnam magni natus perferendis possimus, qui sint suscipit voluptates? Amet
          aspernatur cupiditate exercitationem fugiat in, optio placeat quaerat quidem similique sit! Amet id incidunt
          tempora.
      </div>
      <div>Alias amet aperiam architecto assumenda commodi consectetur cupiditate dolore doloribus eius eveniet
          excepturi expedita fugit id labore magnam, molestias natus obcaecati quam quasi quibusdam repellat sequi
          similique veritatis! Ipsum, perferendis.
      </div>
  </div>
</body>
</html>